<template>
	<view class="filter_date_view">
		<view class="type_view">
			<picker :range="dateTypeList" range-key="typeTitle" :value="dateTypeList[typeIndex]"
				@change="bindTypeChange">
				<label class="type_title">{{ dateTypeList[typeIndex].typeTitle }}</label>
				<image class="type_menu_icon"
					:src="typeOpen ? 'https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom_sel.png' : 'https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png'"></image>
			</picker>
		</view>
		<view class="date_view" v-if="typeIndex==1">
			<view class="selent-title">
				<dyDatePicker timeType="month" @getData="bindmonthChange" placeholder="请选择月份" :childValue="monthDate">
				</dyDatePicker>
				<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png" mode=""></image>
			</view>
		</view>
		<view class="date_view" v-if="typeIndex==2">
			<view class="selent-title">
				<dyDatePicker timeType="year" @getData="bindyearChange" placeholder="请选择年份" :childValue="yearDate">
				</dyDatePicker>
				<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png" mode=""></image>
			</view>
		</view>
		<view class="date_view" v-if="typeIndex==0">
			<picker :range="weekList" :value="weekindex" @change="bindweekchange">
				<label class="type_title">{{weekList[weekindex]}}</label>
				<image class="type_menu_icon"
					:src="dateOpen ? 'https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom_sel.png' : 'https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png'"></image>
			</picker>
		</view>
	</view>
</template>

<script>
	import dyDatePicker from '../../components/dy-Date/dy-Date.vue'
	export default {
		name: "date-filter-view",
		components: {
			dyDatePicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				typeIndex: 0,
				dateValue: currentDate,
				weekList: [],
				weekindex: 0,
				monthDate: this.getCurrentMonth(),
				yearDate: this.getCurrentYear()
			};
		},
		props: {
			dateTypeList: {
				type: Array,
				default: () => []
			}
		},

		mounted() {
			this.weekindex = this.getYearWeek()>0 ? this.getYearWeek() - 1 : 0
			let that = this
			let time = that.helper.getWeeksByYear(new Date().getFullYear())
			let array = ''
			time.filter(item => {
				item[0] = item[0] ? item[0] : ''
				item[6] = item[6] ? item[6] : ''
				if (item[0]) {
					array = item[0] + '~' + item[6]
				} else {
					array = item[6]
				}
				that.weekList.push(array.split('~'))


			})
			var  dateData = {
					type: 'week',
					endDate: that.weekList[that.weekindex][1],
					beginDate:  that.weekList[that.weekindex][0]
				}
				this.$emit('dateEvent', dateData)
		},
		methods: {
			getYearWeek () {
				const date = new Date()
				let a = date.getFullYear()
				let b = date.getMonth() + 1
				let c = date.getDate()
			    var date1 = new Date(a, parseInt(b) - 1, c),
			         date2 = new Date(a, 0, 1),
			     d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
			    return Math.ceil((d + ((date2.getDay() + 1) - 1)) / 7);
			},
			bindTypeChange(e) {
				var dateData = {
					type: "",
					endDate: "",
					beginDate: ""
				}
				let that = this
				this.typeIndex = e.detail.value
				if (this.typeIndex == 0) {
					dateData = {
						type: 'week',
						endDate: that.weekList[that.weekindex][1],
						beginDate:  that.weekList[that.weekindex][0]
					}
				}
				if (this.typeIndex == 1) {
					dateData = {
						type: 'month',
						endDate: this.getCurrentMonth(),
						beginDate: this.getCurrentMonth()
					}

				}
				if (this.typeIndex == 2) {
					dateData = {
						type: 'year',
						endDate: this.getCurrentYear(),
						beginDate: this.getCurrentYear()
					}

				}

				this.$emit('dateEvent', dateData)
			},
			bindyearChange(e) {
				var dateData = {
					type: 'year',
					endDate: e,
					beginDate: e
				}
				this.$emit('dateEvent', dateData)
			},
			bindmonthChange(e) {
				var dateData = {
					type: 'month',
					endDate: e,
					beginDate: e
				}
				this.$emit('dateEvent', dateData)
			},
			bindweekchange(e) {
				this.weekindex = e.detail.value
				var dateData = {
					type: 'week',
					endDate: this.weekList[e.detail.value][1],
					beginDate: this.weekList[e.detail.value][0]
				}
				this.$emit('dateEvent', dateData)
			},
			bindDateChange(e) {
				var curentTimesTamp = Date.parse(new Date())
				var endDate = e.detail.value
				var selTimesTamp = Date.parse(new Date(endDate))
				if (selTimesTamp > curentTimesTamp) {
					this.dateValue = this.getDate()
				} else {
					this.dateValue = endDate
					var dateData = {
						type: this.dateTypeList[this.typeIndex].type,
						endDate: this.dateValue,
						beginDate: this.getBeginDate(endDate)
					}
					this.$emit('dateEvent', dateData)
				}
			},
			getBeginDate(endDate) {
				let eDate = new Date(endDate)
				let timestamp = eDate.getTime() - 7 * 24 * 3600 * 1000
				let date = new Date(timestamp)
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				month = month > 9 ? month : '0' + month
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type == 'start') {
					year = year - 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getCurrentMonth() {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			},
			getCurrentYear() {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				return `${year}`
			},
		}
	}
</script>

<style scoped>
	.filter_date_view {
		height: 94rpx;
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.type_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.type_title {
		font-size: 32rpx;
		color: #234941;
	}

	.type_menu_icon {
		margin-left: 10rpx;
		width: 16rpx;
		height: 10rpx;
	}

	.date_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 80rpx;
	}

	.selent-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 44rpx;
	}

	.date_view image {
		width: 16rpx;
		height: 10rpx;
		margin-left: 10rpx;
	}
</style>
